<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <!-- 引入Vue -->
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <!-- 引入样式 -->
    <link href="https://cdn.bootcss.com/element-ui/2.15.0/theme-chalk/index.css" rel="stylesheet">
    <!-- 引入组件库 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.0/index.min.js"></script>

    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>

    <!--    <script src="/js/axios.min.js"></script>-->

</head>
<body id = "body">
<div  id="app" v-loading="loading">
    <el-menu
            mode="horizontal"
            background-color="#545c64"
            default-active="3"
            text-color="#fff"
            @select="handleSelect"
            active-text-color="#ffd04b">
        <el-menu-item index="1">检测项目管理</el-menu-item>
        <el-menu-item index="2">方案管理</el-menu-item>
        <el-menu-item index="3">质检管理</el-menu-item>
    </el-menu>

    <!-------------------------------drawer 存储过程获取产品列表 ----------------------up ------------------->
    <el-card style="margin-top: 10px;margin-left: 2%;margin-right:2%">
        <el-form style="margin-top: 10px">
            <el-row gutter="24" type="flex" align="middle" >
                <el-col :span = 4>
                    <el-form-item label="物料名称" >
                        <el-input v-model="quality.name"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span = 12>
                    <el-form-item label="质检类型" >
                        <el-input v-model="quality.describe"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <el-table
                :data="quality.tiltles"
                tooltip-effect="dark"
                :show-header="false"
                border
                style="width: 100%;">
            <el-table-column
                    prop="name"
                    width="200px">
            </el-table-column>
            <el-table-column
                    prop="describe">
            </el-table-column>
        </el-table>
        <el-table
                :data="quality.entitys"
                tooltip-effect="dark"
                border
                style="width: 100%;">
            <el-table-column
                    type="index"
                    label="项次"
                    width="50">
            </el-table-column>
            <el-table-column
                    prop="name"
                    width="150px"
                    label="测试项目">
            </el-table-column>
            <el-table-column
                    prop="specs"
                    width="150px"
                    label="规格">
            </el-table-column>
            <el-table-column
                    prop="no1"
                    width="120px"
                    label="NO.1">
                <template slot-scope="scope">
                    <el-input v-model="scope.row.no1"></el-input>
                </template>
            </el-table-column>
            <el-table-column
                    prop="no2"
                    width="120px"
                    label="NO.2">
                <template slot-scope="scope">
                    <el-input v-model="scope.row.no2"></el-input>
                </template>
            </el-table-column>
            <el-table-column
                    prop="no3"
                    width="120px"
                    label="NO.3">
                <template slot-scope="scope">
                    <el-input v-model="scope.row.no3"></el-input>
                </template>
            </el-table-column>
            <el-table-column
                    prop="no4"
                    width="120px"
                    label="NO.4">
                <template slot-scope="scope">
                    <el-input v-model="scope.row.no4"></el-input>
                </template>
            </el-table-column>
            <el-table-column
                    prop="no5"
                    width="120px"
                    label="NO.5">
                <template slot-scope="scope">
                    <el-input v-model="scope.row.no5"></el-input>
                </template>
            </el-table-column>
            <el-table-column
                    prop="no6"
                    width="120px"
                    label="NO.6">
                <template slot-scope="scope">
                    <el-input v-model="scope.row.no6"></el-input>
                </template>
            </el-table-column>
            <el-table-column
                    prop="no7"
                    width="120px"
                    label="NO.7">
                <template slot-scope="scope">
                    <el-input v-model="scope.row.no7"></el-input>
                </template>
            </el-table-column>
            <el-table-column
                    prop="no8"
                    width="120px"
                    label="NO.8">
                <template slot-scope="scope">
                    <el-input v-model="scope.row.no8"></el-input>
                </template>
            </el-table-column>
            <el-table-column
                    prop="judge"
                    width="120px"
                    label="判定">
                <template slot-scope="scope">
                    <el-select v-model="scope.row.judge" placeholder="请选择">
                        <el-option
                                v-for="item in judges"
                                :key="item"
                                :label="item"
                                :value="item">
                        </el-option>
                    </el-select>
                </template>
            </el-table-column>
        </el-table>
        <div style="float: right;padding: 10px">
            <el-button type="success" @click="save">保存</el-button>
        </div>
    </el-card>
</div>

</body>

<script>
    new Vue({
        el: '#app',
        created(){
            //设置全局的
            var instance = axios.create({
                timeout: 20000,
                //headers: { 'Content-Type': 'application/x-www-form-urlencoded'}
                headers: {'Content-Type': 'application/json;charset=utf-8'}
            });
            this.$axios = instance;
            this.getProject(this.getUrlKey('id'));
        },
        mounted(){

        },
        beforeDestroy() {

        },
        data() {
            return {
                $axios:{},
                query:{
                    index:0,
                    size:10,
                    name:'',
                },
                loading:false,
                quality:{},
                judges:[
                    '合格','不合格'
                ]
            }
        },
        methods:{
            handleSelect(key, keyPath) {
                if(key == '1'){
                    window.location.href='/basePlan';
                }
                if(key == '2'){
                    window.location.href='/main';
                }
                if(key == '3'){
                    window.location.href='/quality';
                }
            },
            handleSelectionChange(val) {
                this.multipleSelection = val
            },
            handleSelectionChange(val) {
                this.multipleSelection = val
            },

            /******************************************数据格式化formater down*******************************************/

            /******************************************数据格式化formater up*******************************************/


            /******************************************请求 down*******************************************/
            save(){
                console.log(this.quality)
                let there = this;
                this.post('/quality/save',this.quality,function (res) {
                    if(200 === res.code){
                        there.success(res.message);
                        window.location.href='/quality'
                        //setTimeout(window.location.href='/main',3);
                    }
                })
            },
            delMas(row, index){
                let there = this;
                this.get('/lgtMas/del?id='+row.id,function (res) {
                    if(200 === res.code){
                        there.loading = false;
                        there.success(res.message);
                        there.searchLgtList()
                    }else {
                        there.loading = false;
                        there.error(res.message);
                    }
                })
            },
            searchLgtList(){
                let there = this;
                this.post('/lgtMas/query',this.query,function (res) {
                    if(200 === res.code){
                        there.lgtPage= res.data.page;
                    }else {
                        there.error(res.message);
                        setTimeout(window.location.href='/main',3);
                    }
                })
            },
            getProject(id){
                let there = this;
                this.get('/project/get?id='+id,function (res) {
                    if(200 === res.code){
                        let data  = res.data.data;
                        let entitys = data.entitys;
                        let tiltles = data.tiltles;
                        for(let ent of entitys){
                            ent.id = null;
                            ent.refId = null;
                        }
                        for(let ent of tiltles){
                            ent.id = null;
                            ent.refId = null;
                        }
                        there.quality.entitys = entitys;
                        there.quality.tiltles = tiltles;
                    }else {
                        there.error(res.message);
                        setTimeout(window.location.href='/main',3);
                    }
                })
            },
            getStockQuality(){
                let there = this;
                let param = 'materialname='+this.SQ.materialname+'&materialmodel='+this.SQ.materialmodel+'&fStockId='+this.mas.outStockId
                this.get('/stockQuality/getStockQuality?'+param,function (res) {
                    console.log(res)
                    if(200 === res.code){
                        there.stockQuality = res.data.stockQuality;
                    }else {
                        there.error(res.message)
                    }
                })
            },

            checkIcItem(outcomes){
                let there = this;
                this.post('/basedata/checkIcItem',outcomes,function (res) {
                    if(200 === res.code){
                        there.outcome = res.data.outcome;
                    }else {
                        there.error(res.message)
                    }
                })
            },

            saveMuser(){
                let there = this;
                let user = this.muser;
                if(this.muser.n_password1 == this.muser.n_password2){
                    this.post('/user/saveMuser',this.muser, function (res) {
                        if(200 === res.code){
                            there.success(res.message);
                            there.type='';
                            there.editVisible=false;
                        }else {
                            there.error(res.message)
                        }
                    })
                }else{
                    there.success('新密码不一致');
                }
            },
            getAllBase(){
                let there = this;
                this.get('/basedata/getAllBase',function (res) {
                    if(200 === res.code){
                        there.getMuser();
                        there.company = res.data.company;
                        there.emp = res.data.emp;
                        there.suppiler = res.data.suppiler;
                        there.stock = res.data.stock;
                        there.icitem = res.data.icitem;
                    }else {
                        there.error(res.message)
                    }
                })
            },
            process(){
                let there = this;
                this.get('/lgtMas/finish?id='+this.mas.id,function (res) {
                    if(200 === res.code){
                        there.success('保存成功')
                        there.type = 'machingList';
                        there.searchLgtList();
                    }else {
                        there.error(res.message)
                    }
                })
            },
            post(url,data,callback){
                this.loading = true;
                let there = this;
                this.$axios.post(url,JSON.stringify(data)).then(function (res) {
                    callback(res.data)
                    there.loading = false;
                }).catch(function (err) {
                    there.loading = false;
                    there.error(err)
                });
            },
            get(url,callback) {
                this.loading = true;
                let there = this;
                this.$axios.get(url).then(function (res) {
                    callback(res.data)
                    there.loading = false;
                }).catch(function (err) {
                    console.log(err);
                    there.loading = false;
                    there.error(err)
                });

            },
            error(mes){
                this.$message({
                    message: mes,
                    type: 'error'
                });
            },
            success(mes){
                this.$message({
                    message: mes,
                    type: 'success'
                });
            },
            add(){
                window.location.href='/add';
            },
            getUrlKey: function (name) {
                return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ""])[1].replace(/\+/g, '%20')) || null
            }
        },
        computed(){
        }
    })
</script>
<style>
    #body {
        margin: 0;
        padding: 0;
        background-color: #f2f2f2;
    }
    .c_head{
        background-color: #ffffff;
    }
    .c_header_left{
        float: left;
    }
    .c_header_right{
        float: right;
        margin: 10px;
    }
    .el-menu-item{
        font-weight: bold;
    }
    .c_menu_item{
        font-size: 35px;
        margin-left: 50px;
        margin-right: 50px;
    }
    .c_form_btn{
        float: right;
        margin-right: 50px;
    }
    .c_form{
        margin-bottom: 50px;
    }
    .handle-box {
        margin: 20px;
    }
    .handle-input {
        margin: 10px;
        width: 300px;
        display: inline-block;
    }
    .table {
        width: 100%;
        font-size: 14px;
    }
</style>
</html>